@extends('shop::layouts.master')
@section('title')
    首页
@endsection
@section('tab')
    <div class="layui-fluid">
        <form class="layui-form layui-col-space5">
            <div class="layui-inline layui-show-xs-block">
                <div class="layui-btn layui-btn-normal">近半年数据</div>
{{--                @switch($s_date_type)
                    @case('week')
                    <button class="layui-btn layui-btn-normal" name="date_type" value="week">周</button>
                    <button class="layui-btn layui-btn-primary" name="date_type" value="month">月</button>
                    <button class="layui-btn layui-btn-primary" name="date_type" value="half_year">半年</button>
                    @break

                    @case('month')
                    <button class="layui-btn layui-btn-primary" name="date_type" value="week">周</button>
                    <button class="layui-btn layui-btn-normal" name="date_type" value="month">月</button>
                    <button class="layui-btn layui-btn-primary" name="date_type" value="half_year">半年</button>
                    @break

                    @case('half_year')
                    <button class="layui-btn layui-btn-primary" name="date_type" value="week">周</button>
                    <button class="layui-btn layui-btn-primary" name="date_type" value="month">月</button>
                    <button class="layui-btn layui-btn-normal" name="date_type" value="half_year">半年</button>
                    @break

                    @default
                    <button class="layui-btn layui-btn-normal" name="date_type" value="week">周</button>
                    <button class="layui-btn layui-btn-primary" name="date_type" value="month">月</button>
                    <button class="layui-btn layui-btn-primary" name="date_type" value="half_year">半年</button>
                @endswitch--}}



            </div>
        </form>


        <div class="layui-row layui-col-space15">

            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header"></div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="ID_order_num" class="layui-col-sm12" style="height: 300px;"></div>

                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header"></div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="ID_order_profit" class="layui-col-sm12" style="height: 300px;"></div>

                    </div>
                </div>
            </div>

        </div>
    </div>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script type="text/javascript">

        $(function()
        {
            chart_order_num();//商户订单-图表
            chart_order_profit();//商户收益-图表
        });


        /*图表数据*/
        function chart_data() {
            return {!! $arr_data !!};
        }

        /*商户订单-图表*/
        function chart_order_num() {
            // 基于准备好的dom，初始化echarts实例
            var ID_order_num = echarts.init(document.getElementById('ID_order_num'));

            var arr_data = chart_data();
            var x_date = arr_data.date;// X轴 日期
            var y_chart_one = arr_data.chart_one;// Y轴 数量集合
            // var y_money = arr_data.money;// Y轴 收益集合
            var y_num_name = y_chart_one.name;
            var chart_name = y_chart_one.chart_name;

            var legend_data = [];
            var series_data = [];
            for(let key in y_num_name) {
                let value = y_num_name[key];
                legend_data.push(value);

                let s_data = y_chart_one[key];
                let series =  {
                    name: value,
                    type: 'line',
                    data: s_data
                };

                series_data.push(series);

            }

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: chart_name,
                    // subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legend_data
                },
                toolbox: {
                    show: true,
                    feature: {
                        // dataZoom: {
                        //     yAxisIndex: 'none'
                        // },
                        // dataView: {readOnly: false},
                        // magicType: {type: ['line', 'bar']},
                        // restore: {},
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '6%',
                    right: '6%',
                    bottom: '3%',
                    containLabel: true
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: x_date
                },

                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} 单'
                    }
                },
                series: series_data
            };

            // 使用刚指定的配置项和数据显示图表。
            ID_order_num.setOption(option);
        }

        /*商户收益-图表*/
        function chart_order_profit() {
            // 基于准备好的dom，初始化echarts实例
            var ID_order_profit = echarts.init(document.getElementById('ID_order_profit'));

            var arr_data = chart_data();
            var x_date = arr_data.date;// X轴 日期
            var y_chart_one = arr_data.chart_two;// Y轴 数量集合
            // var y_money = arr_data.money;// Y轴 收益集合
            var y_num_name = y_chart_one.name;
            var chart_name = y_chart_one.chart_name;

            var legend_data = [];
            var series_data = [];
            for(let key in y_num_name) {
                let value = y_num_name[key];
                legend_data.push(value);

                let s_data = y_chart_one[key];
                let series =  {
                    name: value,
                    type: 'line',
                    data: s_data
                };

                series_data.push(series);

            }

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: chart_name,
                    // subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legend_data
                },
                toolbox: {
                    show: true,
                    feature: {
                        // dataZoom: {
                        //     yAxisIndex: 'none'
                        // },
                        // dataView: {readOnly: false},
                        // magicType: {type: ['line', 'bar']},
                        // restore: {},
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '6%',
                    right: '6%',
                    bottom: '3%',
                    containLabel: true
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: x_date
                },

                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                },
                series: series_data
            };


            // 使用刚指定的配置项和数据显示图表。
            ID_order_profit.setOption(option);
        }

        /*饼图*/
        function fffff() {
            option = {
                title: {
                    text: '天气情况统计',
                    subtext: '虚构数据',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    // orient: 'vertical',
                    // top: 'middle',
                    bottom: 10,
                    left: 'center',
                    data: ['西凉', '益州', '兖州', '荆州', '幽州']
                },
                series: [
                    {
                        type: 'pie',
                        radius: '65%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',
                        data: [
                            {value: 1548, name: '幽州'},
                            {value: 535, name: '荆州'},
                            {value: 510, name: '兖州'},
                            {value: 634, name: '益州'},
                            {value: 735, name: '西凉'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
        }
    </script>
@endsection

@section('tab_js')


@endsection




